<template>
	<el-row class="row-bg">
		<el-col :span="24">
			<el-row type="flex" justify="space-between" class="row-tl">
				<el-col :span="3" class="title">课程列表</el-col>
				<el-col :span="5">
					<el-button type="primary" size="medium">+&nbsp;新建</el-button>
					<el-button size="medium" @click="batchButton">批量操作</el-button>
				</el-col>
			</el-row>
		</el-col>
		<el-col :span="24" class="row-tb">
			<el-row type="flex" justify="center">
				<el-col :span="23">
					<el-table
						:data="data"
						style="width: 100%"
						tooltip-effect="dark"
						size="medium"
						ref="multipleTable"
						@selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column prop="infoImg" label="课程信息" width="260">
							<template slot-scope="scope">
								<div class="img-box">
									<el-image
										style="width: 63px; height: 40px"
										:src="'/src/assets/' + scope.row.infoImg"
										fit=""></el-image>
									<span style="margin-left: 10px">{{ scope.row.info }}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="price" label="课程价格"></el-table-column>
						<el-table-column prop="subscribe" label="订阅量"></el-table-column>
						<el-table-column prop="state" label="课程状态"></el-table-column>
						<el-table-column prop="type" label="课程类型"></el-table-column>
						<el-table-column
							prop="time"
							label="上架时间"
							width="150"></el-table-column>
						<el-table-column prop="sort" label="排序号"></el-table-column>
						<el-table-column label="操作" width="200" fixed="right">
							<el-link type="primary" style="margin-right: 10px">数据</el-link>
							<el-link type="primary" style="margin-right: 10px">编辑</el-link>
							<el-link type="primary" style="margin-right: 10px">下架</el-link>
							<el-link type="primary" style="margin-right: 10px">删除</el-link>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
		</el-col>
		<el-col :span="24">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[10, 20, 30, 50]"
				:page-size="pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="data.length">
			</el-pagination>
		</el-col>
	</el-row>
</template>

<script>
export default {
	data() {
		return {
			pagesize: 10, //每页的数据
			currentPage: 1, //分页默认选中页数
			data: [
				{
					id: 1,
					info: "西班牙语0-B2高级直达",
					infoImg: "u4724.png",
					price: "800",
					subscribe: "300",
					state: "已上架",
					type: "单节课",
					time: "2020/09/08 10:45",
					sort: "10",
				},
				{
					id: 2,
					info: "西班牙语0-B2高级直达",
					infoImg: "u4724.png",
					price: "800",
					subscribe: "300",
					state: "已上架",
					type: "单节课",
					time: "2020/09/08 10:45",
					sort: "10",
				},
				{
					id: 3,
					info: "西班牙语0-B2高级直达",
					infoImg: "u4724.png",
					price: "800",
					subscribe: "300",
					state: "已上架",
					type: "单节课",
					time: "2020/09/08 10:45",
					sort: "10",
				},
			],
		};
	},
	methods: {
		handleSizeChange(size) {
			this.pageSize = size;
			// this.currentPage = 1;
		},
		handleCurrentChange(current) {
			this.currentPage = current;
		},
		batchButton() {
			if (this.multipleSelection.length < 1) {
				this.$message({
					message: "请选择数据",
					type: "warning",
				});
			} else {
			}
		},
		handleSelectionChange(val) {
			this.multipleTable = val;
			console.log(this.multipleTable);
		},
	},
};
</script>

<style lang="less" scoped>
.title {
	margin-left: 32px;
}
.row-tl {
	padding: 16px 0px;
}
.row-bg {
	border-right: 5px;
	border: 1px solid rgba(233, 233, 233, 1);
	background-color: #ffffff;
	margin-top: 20px;
}
.img-box {
	display: flex;
	align-items: center;
}
</style>
